/**
参考网址：https://blog.csdn.net/qq_32492777/article/details/121349239

获取点到线的距离
*/


<template>
    <div id="content">
        <div id="map" ref="map"/>
    </div>
</template>

<script>
    import "ol/ol.css";
    import {Map, Feature, View} from "ol";
    import {getDistance} from "ol/sphere"
    import TileLayer from "ol/layer/Tile";
    import VectorLayer from "ol/layer/Vector";
    import VectorSource from "ol/source/Vector";
    import {Style, Stroke, Fill, RegularShape, Text} from "ol/style";
    import {LineString, Point} from "ol/geom";
    import XYZ from "ol/source/XYZ";

    export default {
        data() {
            return {
                map: null,
            };
        },
        mounted() {
            this.initMap(); //初始化地图
            this.drawMinRoad();
        },
        methods: {

            drawMinRoad() {
                var vectorSource = new VectorSource();
                var vectorLayer = new VectorLayer({
                    source: vectorSource,

                });
                this.map.addLayer(vectorLayer);

                var userPoint = [110.26499613189605, 39.04069115959695] //人员位置
                var testLine = [
                    [110.32610758209135, 39.051162503591094],
                    [110.28799875640776, 38.986961148610625]
                ]//测试线段
                var userFeature = new Feature({
                    geometry: new Point(userPoint)
                })
                var lineFeature = new Feature({
                    geometry: new LineString(testLine)
                })
                vectorSource.addFeatures([userFeature, lineFeature]);
                var lineGeomtry = lineFeature.getGeometry()//获取线段的geometry
                var closestPoint = lineGeomtry.getClosestPoint(userPoint)//距离人员位置最近线段上的点
                console.log('线段上最近的点：',closestPoint)
                var closestPointFeature = new Feature({
                    geometry: new Point(closestPoint)
                })
                var closestLineFeature = new Feature({
                    geometry: new LineString([userPoint, closestPoint])
                })
                closestLineFeature.setStyle(new Style({
                    stroke: new Stroke({
                        color: "rgba(0, 128, 0, 0.8)",
                        width: 3,
                        lineDash: [10, 10],
                    }),
                }))
                vectorSource.addFeatures([closestPointFeature, closestLineFeature]);
                //计算距离值
                var length = getDistance(userPoint, closestPoint)
                var labelFeature = new Feature({
                    geometry: new Point(closestLineFeature.getGeometry().getCoordinateAt(0.5)),
                    name: length.toFixed(2) + " m"
                });
                var labelStyle = new Style({
                    text: new Text({
                        font: "12px Calibri,sans-serif",
                        fill: new Fill({
                            color: "rgba(0, 0, 0, 1)",
                        }),
                        backgroundFill: new Fill({
                            color: "#FFCC33",
                        }),
                        text: labelFeature.get("name"), //文本内容
                        padding: [2, 2, 2, 2],
                        textBaseline: "bottom",
                        offsetY: -12
                    }),
                    image: new RegularShape({
                        radius: 6,
                        points: 3,
                        angle: Math.PI,
                        displacement: [0, 8],
                        fill: new Fill({
                            color: "#FFCC33",
                        })
                    })
                });
                labelFeature.setStyle(labelStyle)
                vectorSource.addFeatures([labelFeature]);
            },

            /**
             * 初始化一个 openlayers 地图
             */
            initMap() {
                this.map = new Map({
                    target: "map",
                    view: new View({
                        center: [110.26499613189605, 39.04069115959695],
                        zoom: 12,
                        projection: "EPSG:4326",
                    }),
                });
                var gaodeLayer = new TileLayer({
                    source: new XYZ({
                        url: "http://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"
                    })
                });
                this.map.addLayer(gaodeLayer);
            },
        },
    };
</script>
<style lang="scss" scoped>
    #map {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    /*移除OSM的链接*/
    :deep(.ol-attribution) {
        display: none;
    }
</style>